<template>
	<view class="uni-popup-share">
		<view class="uni-share-title"><text class="uni-share-title-text">输入支付密码</text></view>
		<view class="uni-share-content">
			<view class="iputval">
				<view class="input-item" v-for="(item,index) in dataPwdtxt" :key="index" @click.stop="clickButton" :data-val="item">
					{{item}}
				</view>
			</view>
			<view class="keyboard">
				<view class="button-item" :class="'btn'+index" v-for="(item,index) in dataKeys" :key="index" @click.stop="clickButton" :data-val="item">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import popup from '../uni_modules/uni-popup/components/uni-popup/popup.js'
	
	const E_PAY = 'reset_paypwd';
	
	export default {
		name: 'paypwd',
		mixins:[popup],
		props: {
			title: {
				type: String,
				default: '分享到'
			},
			beforeClose: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				dataKeys:['1','2','3','4','5','6','7','8','9','0','删除','确定'],
				dataPwdtxt:[],
				dataPwdval:[],
				dataInputNum:6,
			}
		},
		created() {
			let _this = this;
			
			_this.doResetPwdtxt();
			//设置监听
			uni.$on(E_PAY,function(param){
				//重置数据
				_this.doResetPwdVal();
			});
		},
		destroyed() {
			//注销监听
			uni.$off(E_PAY);	
		},
		methods: {
			clickButton(e){
				let _this = this, dataset = e.currentTarget.dataset;
				
				if('删除' == dataset.val){
					_this.dataPwdval.pop();
				}else if('确定' == dataset.val){
					//执行提交代码
					if(_this.dataPwdval.length < _this.dataInputNum){
						uni.showToast({
							icon:'none',
							title:'请输入'+_this.dataInputNum+'位密码！'
						});
						return;
					}
					uni.$emit('pay_over', {pwd:_this.dataPwdval.join('')});
					this.close();
				}else{
					if(dataset.val.length > 0 && _this.dataPwdval.length < _this.dataInputNum){
						_this.dataPwdval.push(dataset.val);
					}
				}
				_this.doSynchPwdtxt();
			},
			doSynchPwdtxt(){
				let _this = this;
				
				_this.doResetPwdtxt();
				
				for(let i=0; i<_this.dataPwdval.length; i++){
					_this.$set(_this.dataPwdtxt,i,'*');
				}
			},
			doResetPwdtxt(){
				let _this = this;
				let tmpTxt = [];
				for(let i=0; i<_this.dataInputNum; i++){
					tmpTxt.push('');
				}
				_this.dataPwdtxt = tmpTxt;
			},
			doResetPwdVal(){
				let _this = this;
				
				_this.dataPwdval = [];
				_this.doResetPwdtxt();
			},
			close() {
				if(this.beforeClose) return;				
				this.popup.close();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-popup-share {
		background-color: #FFFFFF;
	}
	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}
	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}
	.uni-share-content {
		display: flex; display: -webkit-flex; flex-direction: column;
		padding: 10px 0px;
	}
	.uni-share-content{
		display: flex; display: -webkit-flex; flex-direction: column; align-items: center;
	}
	.uni-share-content .iputval{
		width: auto; height: 80rpx;
		display: flex; display: -webkit-flex; flex-direction: row; align-items: center; justify-content: center;
		border: 1rpx solid #ddd; background-color: #EFEFEF; border-left: none; border-radius:20rpx;
	}
	.uni-share-content .iputval .input-item{
		width: 80rpx; height: 80rpx;
		display: flex; display: -webkit-flex; align-items: center; justify-content: center;
		border-right: 1rpx solid #ddd; font-size:50rpx; color:#000000; font-weight: bolder;
	}
	.uni-share-content .iputval .input-item:last-child{
		border-right:none;
	}
	.uni-share-content .keyboard{
		width: 485rpx; height: 400rpx; margin-top: 30rpx;
		display: flex; display: -webkit-flex; flex-wrap: wrap;
		border: 1rpx solid #ddd; background-color: #EFEFEF; border-left: none; border-radius:20rpx;
		overflow: hidden;
	}
	.uni-share-content .keyboard .button-item{
		width: 160rpx; height: 100rpx; float:left;
		display: flex; display: -webkit-flex; align-items: center; justify-content: center;
		border-right: 1rpx solid #ddd;border-bottom: 1rpx solid #ddd; font-size:50rpx; color:#000000;
	}
	.uni-share-content .keyboard .button-item:active{
		background-color: #CFCFCF;
	}
	.uni-share-content .keyboard{
		.btn2,.btn5,.btn8,.btn11{
			border-right: none;
		}
	}
</style>
